<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
        <title>卷式电费发票管理系统</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <link rel="stylesheet" type="text/css" href="common/css/index.css">
        <script type="text/javascript" src="common/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="common/js/base64.js"></script>
        <script type="text/javascript" src="common/js/highcharts.js"></script>
		<script type="text/javascript">
            //设置全局ajax不缓存数据
            $.ajaxSetup({cache:false});
			function tabselect(obj){
				var obj1=$(obj);
				//alert(obj1.html());	
				obj1.parent().parent().children(".tabselected").removeClass("tabselected");
				obj1.parent().addClass("tabselected");
				var itemindex=obj1.parent().index();
				//alert(itemindex);
				$(".tabitem").hide();
				$($(".tabitem")[itemindex]).show();
			}
    
    
    

            $(function(){
					$(".tabitem").hide();
					$($(".tabitem")[0]).show();
					//日统计
                     $('#daycount').highcharts({
						title: {
							text: '卷式发票日开票量统计',
							x: -20 //center
						},
						 subtitle: {
							text: '2014年4月1日-2014年4月12日',
							x: -20
						},
						xAxis: {
							categories: ['4月1日', '4月2日', '4月3日', '4月4日', '4月5日', '4月6日',
								'4月7日', '4月8日', '4月9日', '4月10日', '4月11日', '4月12日']
						},
						yAxis: {
							title: {
								text: '开票量 (张)'
							},
							plotLines: [{
								value: 0,
								width: 1,
								color: '#808080'
							}]
						},
						tooltip: {
							valueSuffix: '张'
						},
						legend: {
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'middle',
							borderWidth: 0
						},
						series: [{
							name: '正常票',
							data: [7.0, 6.9, 950, 145, 182, 21.5, 25.2, 26.5, 23.3, 180, 13.9, 9.6]
						}]
					});
					
					//月统计
				 $('#monthcount').highcharts({
							chart: {
								type: 'column'
							},
							title: {
								text: '卷式发票月开票量统计'
							},
							 subtitle: {
								text: '2013年12月-2014年11月',
								x: -20
							},
							xAxis: {
								categories: [
									'2013-12',
									'2014-01',
									'2014-02',
									'2014-03',
									'2014-04',
									'2014-05',
									'2014-06',
									'2014-07',
									'2014-08',
									'2014-09',
									'2014-10',
									'2014-11'
								]
							},
							yAxis: {
								min: 0,
								title: {
									text: '开票量 (张)'
								}
							},
							tooltip: {
								headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
								pointFormat: '<tr style="font-size:12px"><td style="color:{series.color};padding:0">{series.name}: </td>' +
									'<td style="padding:0"><b>{point.y:.1f} 张</b></td></tr>',
								footerFormat: '</table>',
								shared: true,
								useHTML: true
							},
							plotOptions: {
								column: {
									pointPadding: 0.2,
									borderWidth: 0
								}
							},
							series: [{
								name: '正常票',
								data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
							}]
						});
						//年统计
						$('#yearcount').highcharts({
							chart: {
								type: 'bar'
							},
							title: {
								text: '卷式发票年开票量统计'
							},
							subtitle: {
								text: '2010年-2014年'
							},
							xAxis: {
								categories: ['2014年', '2013年', '2012年', '2011年', '2010年'],
								title: {
									text: null
								}
							},
							yAxis: {
								min: 0,
								title: {
									text: '开票量 (张)',
									align: 'high'
								},
								labels: {
									overflow: 'justify'
								}
							},
							tooltip: {
								valueSuffix: ' 张'
							},
							plotOptions: {
								bar: {
									dataLabels: {
										enabled: true
									}
								}
							},
							legend: {
								layout: 'vertical',
								align: 'right',
								verticalAlign: 'top',
								x: -40,
								y: 100,
								floating: true,
								borderWidth: 1,
								backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
								shadow: true
							},
							credits: {
								enabled: false
							},
							series: [{
								name: '开票量',
								data: [107, 31, 635, 203, 2]
							}]
						});
					

            });
        
        </script>
  </head>
  
  <body>
  		<div class="toplogobg">
            <div class="toplogo">
                <span>卷式电费发票管理系统</span>
                <em>Volume Electricity Invoice Management System</em>
            </div>
        </div>
		<div class="clearboth"></div>
        
        <div class="menubg">
            <div class="menu">
                <ul>
                    <li ><a class="active"  href="index.html">发票统计</a></li>
                    <li><a href="publish-1.html">发票查询</a></li>
                    <li><a href="publish-1.html">发票领购</a></li>
                    <li><a href="publish-1.html">发票验旧</a></li>
                    <li><a href="index.html">系统管理</a></li>
                    <li><a href="index.html">系统帮助</a>
<!--                        <ul>
                            <li><a href="index.html">使用手册</a></li>
                            <li><a href="index.html">关于我们</a></li>
                        </ul>-->
                    </li>
                </ul>
            </div>
        </div>
        <div class="clearboth"></div>
        <div class="mainbg">
        	<!--左侧菜单开始-->
        	<div class="leftmenubg">
				<div class="leftmenutoptitle"><span>发票统计</span></div>
                <div class="leftmenu">
                    <div class="menutitle">
                        <span>统计图表</span>
                        <div class="menuopen"></div>
                    </div>
                    <div class="menuitem">
                        <a class="membermenuselected" href="#">当前图表</a>
                        <a  href="membercenter2.html">历史图表</a>
                    </div>
                </div>
                <div class="leftmenu">
                    <div class="menutitle">
                        <span>统计数据</span>
                        <div class="menuopen"></div>
                    </div>
                    <div class="menuitem">
                        <a  href="membercenter.html">汇总数据</a>
                    </div>
                </div>
            </div>
            <!--左侧菜单结束-->
        	<!--右侧功能区开始-->
        	<div class="rightarea">
                <div class="righttitle"><span>统计图表-当前图表</span></div>
                <div class="righttab">
                    <ul>
                        <li class="tabselected"><a href="javascript:void(0);" onclick="tabselect(this)">日统计图</a></li>
                        <li><a href="javascript:void(0);" onclick="tabselect(this)">月统计图</a></li>
                        <li><a href="javascript:void(0);" onclick="tabselect(this)">年统计图</a></li>
                    </ul>
            	</div>
            	<!--tab显示区-->
            	<div class="tabitem">
                    <div id="daycount"  style="width:790px;"></div>
                </div>
                <div class="tabitem">
                    <div id="monthcount" style="width:790px;"></div>
                </div>
                <div class="tabitem">
                    <div id="yearcount" style="width:790px;"></div>
                </div>
            </div>
            <!--右侧功能区结束-->
        
        </div>

  </body>
</html>
